<!--
  - Copyright (c) 2018 LI Zhennan
  -
  - Use of this work is governed by an MIT License.
  - You may find a license copy in project root.
  -
  -->

<template>
  <div class="thumbnails">
    <h2>{{$t("animal_code_title")}}</h2>
    <div class="animal"><img src="../assets/thumbnails/0.tif.gif" alt="0"/>0</div>
    <div class="animal"><img src="../assets/thumbnails/1.tif.gif" alt="1"/>1</div>
    <div class="animal"><img src="../assets/thumbnails/2.tif.gif" alt="2"/>2</div>
    <div class="animal"><img src="../assets/thumbnails/3.tif.gif" alt="3"/>3</div>
    <div class="animal"><img src="../assets/thumbnails/4.tif.gif" alt="4"/>4</div>
    <div class="animal"><img src="../assets/thumbnails/5.tif.gif" alt="5"/>5</div>
    <div class="animal"><img src="../assets/thumbnails/6.tif.gif" alt="6"/>6</div>
    <div class="animal"><img src="../assets/thumbnails/7.tif.gif" alt="7"/>7</div>
    <div class="animal"><img src="../assets/thumbnails/8.tif.gif" alt="8"/>8</div>
    <div class="animal"><img src="../assets/thumbnails/9.tif.gif" alt="9"/>9</div>
    <div class="animal"><img src="../assets/thumbnails/10.tif.gif" alt="10"/>10</div>
    <div class="animal"><img src="../assets/thumbnails/11.tif.gif" alt="11"/>11</div>
    <div class="animal"><img src="../assets/thumbnails/12.tif.gif" alt="12"/>12</div>
    <div class="animal"><img src="../assets/thumbnails/13.tif.gif" alt="13"/>13</div>
    <div class="animal"><img src="../assets/thumbnails/14.tif.gif" alt="14"/>14</div>
    <div class="animal"><img src="../assets/thumbnails/15.tif.gif" alt="15"/>15</div>
    <div class="animal"><img src="../assets/thumbnails/16.tif.gif" alt="16"/>16</div>
    <div class="animal"><img src="../assets/thumbnails/17.tif.gif" alt="17"/>17</div>
    <div class="animal"><img src="../assets/thumbnails/18.tif.gif" alt="18"/>18</div>
    <div class="animal"><img src="../assets/thumbnails/19.tif.gif" alt="19"/>19</div>
    <div class="animal"><img src="../assets/thumbnails/20.tif.gif" alt="20"/>20</div>
    <div class="animal"><img src="../assets/thumbnails/21.tif.gif" alt="21"/>21</div>
    <div class="animal"><img src="../assets/thumbnails/22.tif.gif" alt="22"/>22</div>
    <div class="animal"><img src="../assets/thumbnails/23.tif.gif" alt="23"/>23</div>
    <div class="animal"><img src="../assets/thumbnails/24.tif.gif" alt="24"/>24</div>
    <div class="animal"><img src="../assets/thumbnails/25.tif.gif" alt="25"/>25</div>
    <div class="animal"><img src="../assets/thumbnails/26.tif.gif" alt="26"/>26</div>
    <div class="animal"><img src="../assets/thumbnails/27.tif.gif" alt="27"/>27</div>
    <div class="animal"><img src="../assets/thumbnails/28.tif.gif" alt="28"/>28</div>
    <div class="animal"><img src="../assets/thumbnails/29.tif.gif" alt="29"/>29</div>
    <div class="animal"><img src="../assets/thumbnails/30.tif.gif" alt="30"/>30</div>
    <div class="animal"><img src="../assets/thumbnails/31.tif.gif" alt="31"/>31</div>
    <div class="animal"><img src="../assets/thumbnails/32.tif.gif" alt="32"/>32</div>
    <div class="animal"><img src="../assets/thumbnails/33.tif.gif" alt="33"/>33</div>
    <div class="animal"><img src="../assets/thumbnails/34.tif.gif" alt="34"/>34</div>
    <div class="animal"><img src="../assets/thumbnails/35.tif.gif" alt="35"/>35</div>
    <div class="animal"><img src="../assets/thumbnails/36.tif.gif" alt="36"/>36</div>
    <div class="animal"><img src="../assets/thumbnails/37.tif.gif" alt="37"/>37</div>
    <div class="animal"><img src="../assets/thumbnails/38.tif.gif" alt="38"/>38</div>
    <div class="animal"><img src="../assets/thumbnails/39.tif.gif" alt="39"/>39</div>
    <div class="animal"><img src="../assets/thumbnails/40.tif.gif" alt="40"/>40</div>
  </div>
</template>

<script>
  export default {
    name: "thumbnails",
  }
</script>

<style scoped>
  img {
    width: 120px;
  }

  .animal {
    width: 120px;
    display: inline-block;
    font-size: 1.2em;
    margin: 40px 22px;
  }

  .thumbnails {
    max-width: 92%;
    margin: 50px 0 0 0;
  }
</style>